<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>无刷新添加删除input输入框-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../static/css/font.css">
  <link rel="stylesheet" href="../../static/css/weadmin.css">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
  <style type="text/css">
    /* 新增删除图标的样式 */

    .layui-form-label {
      width: 100%;
      text-align: left;
    }

    .layui-form-label,
    .layui-form-item .layui-input-inline {
      margin-top: 10px;
    }

    .yf-input-del .layui-input-inline .layui-input {
      padding-right: 20px;
    }

    .yf-input-del .layui-input-inline i.layui-icon {
      position: absolute;
      right: 2px;
      top: 10px;
      color: #999999;
    }
  </style>

</head>

<body>
  <div class="weadmin-nav">
    <span class="layui-breadcrumb">
      <a href="javascript:;">首页</a>
      <a href="javascript:;">会员管理</a>
      <a href="javascript:;"><cite>输入框操作</cite></a>
    </span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
      href="javascript:location.replace(location.href);" title="刷新">
      <i class="layui-icon layui-icon-refresh"></i>
    </a>
  </div>
  <div class="weadmin-body">
    <div class="weadmin-block">
      <button class="layui-btn" onclick="insertInput()"><i
          class="layui-icon layui-icon-add-circle"></i>新增1条教育背景</button>
      <span class="fr" style="line-height:40px">共有数据：<i class="numText">88</i> 条</span>
    </div>
    <div class="layui-form-item yf-input-del" id="edu_bg">
      <label class="layui-form-label">教育背景:</label>

      <div class="layui-input-inline" id="insertInput11">
        <input type="text" name="edu_bg[5]" value="" autocomplete="off" placeholder="请输入" lay-verify="required"
          class="layui-input">
        <i class="layui-icon layui-icon-close deleteEduBg"></i>
      </div>
      <div class="layui-input-inline" id="insertInput11">
        <input type="text" name="edu_bg[6]" value="" autocomplete="off" placeholder="点击删除图标删除该项输入" lay-verify="required"
          class="layui-input">
        <i class="layui-icon layui-icon-close deleteEduBg"></i>
      </div>
      <div class="layui-input-inline" id="insertInput11">
        <input type="text" name="edu_bg[9]" value="" autocomplete="off" placeholder="点击新增增加新的输入框" lay-verify="required"
          class="layui-input">
        <i class="layui-icon layui-icon-close deleteEduBg"></i>
      </div>
      <div class="layui-input-inline" id="insertInput11">
        <input type="text" name="edu_bg[10]" value="" autocomplete="off" placeholder="name生成判断不重复" lay-verify="required"
          class="layui-input">
        <i class="layui-icon layui-icon-close deleteEduBg"></i>
      </div>
      <div class="layui-input-inline" id="insertInput11">
        <input type="text" name="edu_bg[11]" value="" autocomplete="off" placeholder="避免随意删除新增后产生的name重复问题"
          lay-verify="required" class="layui-input">
        <i class="layui-icon layui-icon-close deleteEduBg"></i>
      </div>
    </div>

  </div>
  <script src="../../lib/layui/layui.js" charset="utf-8"></script>
  <script>
    layui.use(['element', 'jquery'], function () {
      var element = layui.element,
        $ = layui.jquery;

      var key1 = $("#edu_bg").children(".layui-input-inline").length;
      var FieldCount1 = 0;
      $(function () {
        $(".numText").html(key1);
        console.log("Hello,input输入框随意增加删除，新增时生成的name自动判断是否存在，存在则跳过，避免随意删除新增后提交因为name重复输入值被覆盖。");
      });

      window.insertInput = function () {
        //检索已有的input包含的name值
        var arr1 = [];
        FieldCount1++;
        $("#edu_bg input[type='text']").each(function () {
          arr1.push($(this).attr('name'));

        });
        console.log(arr1);
        //alert(arr1);
        //所有name加入数组alert
        var div1 = $("<div></div>").addClass("layui-input-inline");
        //console.log(edu_bg[FieldCount1]);
        var newCount1 = "edu_bg[" + FieldCount1 + "]";
        //判断新生成的name值是否在已存在的数组中
        if ($.inArray(newCount1, arr1) === -1) {
          FieldCount1 = FieldCount1;
          var input1 = "<input type='text' name='edu_bg[" + FieldCount1 +
            "]' value='' autocomplete='off' placeholder='请输入' lay-verify='required' class='layui-input'>"
          var icon1 = "<i class='layui-icon deleteEduBg'>&#x1006;</i>";
          div1.append(input1, icon1);
          $("#edu_bg").append(div1); // 追加新元素
          key1++;
        } else {
          FieldCount1++;
          insertInput();
        }
        $(".numText").html(key1);

      }
      $("body").on("click", ".deleteEduBg", function (e) { //user click on remove text  
        if (key1 > 1) {
          $(this).parent('div').remove(); //remove text box  
          key1--; //decrement textbox  
        } else {
          alert("请至少填写1条教育背景信息！");
          return false;
        }
        $(".numText").html(key1);

      })

    });
  </script>

</body>

</html>